<template>
  <div class="shophead">
    <el-row class="head">
      <el-col
        :span="12"
        :offset="4"
      >
        <div v-if="this.$store.state.user==null">你好请先 <router-link to="/login/login_form">登录</router-link>或 <router-link to="/login/register">注册</router-link>
          <span class="login">
            <router-link to="/home">首页</router-link>
          </span>
        </div>
        <div v-else>
          欢迎您 {{this.$store.state.user.nickName==null?this.$store.state.user.userName:this.$store.state.user.nickName}}
          <router-link to="/home">首页</router-link>
        </div>
      </el-col>
      <el-col :span="8">
        <div v-if="this.$store.state.user !=''&& this.$store.state.user!=null ">
          <span class="login">
            <router-link to="/center/myorder">我的订单</router-link>
          </span>
          <!-- 购物车 -->
          <span class="login">

            <el-dropdown trigger="click">
              <span
                class="el-dropdown-link"
                @click="lookcar"
              >
                购物车({{this.buycar.length}})<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu
                slot="dropdown"
                class="box"
                @click="lookcar"
              >
                <el-dropdown-item
                  icon="el-icon-plus"
                  v-for="item in buycar"
                  :key="item.id"
                >
                  <div>
                    <el-row :gutter="10">
                      <el-col :span="4">
                        <img :src="'http://139.198.178.82:9090/Shopping/'+item.product.defaultImg">
                      </el-col>
                      <el-col :span="16">
                        {{item.product.name}}
                      </el-col>
                      <el-col :span="4">
                        ￥{{item.product.shopPrice/100}}×{{item.quantity}}
                        <p>
                          <a @click="delitem(item.id)">删除</a>
                        </p>
                      </el-col>
                    </el-row>
                  </div>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-row>
                    <el-col :span="18">
                      共{{this.buycar.length}}件商品
                    </el-col>
                    <el-col :span="6">
                      <el-button type="danger">
                        <router-link to="/buycar">去购物车</router-link>
                      </el-button>
                    </el-col>
                  </el-row>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </span>
          <!-- 我的 -->
          <span class="login">

            <el-dropdown>
              <span class="el-dropdown-link">
                我的<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu
                slot="dropdown"
                style="z-index:999"
              >
                <el-dropdown-item icon="el-icon-plus">
                  <router-link to="/center/userset">个人信息</router-link>
                </el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus">
                  <router-link to="/center/myorder">我的订单</router-link>
                </el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus-outline">
                  <router-link to="/center/contact">收货地址</router-link>
                </el-dropdown-item>
                <el-dropdown-item icon="el-icon-plus">
                  <router-link to="/center/favorite">我的收藏</router-link>
                </el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-check">
                  <router-link to="/center/pay">钱包充值</router-link>
                </el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-check">
                  <a @click="exit">退出</a>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </span>
        </div>
      </el-col>
    </el-row>
    <el-row class="search">
      <el-col
        :span="10"
        :offset="4"
      >
        <h1 style="line-height: 100px;">ESHOP
          <span style="font-size:15px">
            <router-link to="/allshop">全部商品</router-link>
          </span>
        </h1>

      </el-col>
      <el-col :span="10">

        <el-input
          v-model="search"
          placeholder="请输入搜索商品"
          prefix-icon="el-icon-search"
          style="width:75%"
        >
          <el-button
            slot="append"
            @click="sousuo"
          >搜索</el-button>
        </el-input>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "shophead",
  inject: ["reload"],
  data() {
    return {
      search: "",
      carshop: [],
      buycar: [],
    };
  },
  methods: {
    goto(path, name) {
      this.$router.push({
        path: path,
        name: name,
      });
      console.log(123);
    },
    sousuo() {
      if (this.search != "") {
        sessionStorage.setItem("shopname", this.search);
        this.$router.push("/search");
        location.reload();
      }
    },
    lookcar() {
      this.$post(this.url + "/cart/selectCart", {
        userId: this.$store.state.user.id,
      }).then((res) => {
        if (res.errorCode == "0") {
          this.buycar = res.data.orderItemList;
          console.log(this.buycar);
        }
      });
    },
    // 删除购物车子项
    delitem(id) {
      console.log(id);
      this.$post(this.url + "/cart/cleanCart", {
        userId: this.$store.state.user.id,
        itemNum: id,
      }).then((res) => {
        if (res.errorCode == "0") {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.lookcar();
        }
      });
    },
    exit() {
      this.$store.state.user = "";
      sessionStorage.clear();
      this.$router.push("/login");
      location.reload();
    },
  },
  created() {
    if (this.$store.state.user != null) {
      this.lookcar();
    }
  },
};
</script>

<style scoped>
h1 {
  margin: 0;
  color: orange;
}
.head {
  height: 30px;
  line-height: 30px;
  background-color: lightgray;
  z-index: 999;
}
.login {
  padding-right: 25px;
}
.search {
  line-height: 100px;
  border-bottom: 1px solid lightgray;
}
a {
  color: black;
}
img {
  width: 100%;
}
.box {
  width: 500px;
}
</style>
